<template>
  <div class="home">
    <!-- 导航 -->
    <nav>
      <router-link to="/recommend">推荐</router-link>
      <router-link to="/rank">排行榜</router-link>
      <router-link to="/search">搜索</router-link>
    </nav>
    <div class="content" :style="{'bottom':showPlayerBar}">
      <router-view />
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'home',
  computed:{
      showPlayerBar(){
        if(this.$store.state.song.al){
          return "50px";
        }else{

          return "0px";
        }
      }
  }
}
</script>

<style lang="scss" scoped>
  .home{
    position: relative;
    // height: calc(100% - 50px);
    height: 100%;
    
  }
  nav{
    background-color: #1a1a1a;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    text-align: center;
    a{
      height: 50px;
      padding: 15px 0;
      font-size: 14px;
      float:left;
      width:33.33%;
      &.router-link-active{
        border-bottom: 2px solid #42b983;
      }
    }
  }
  .content{
    position: absolute;
    top: 50px;
    width: 100%;
    bottom: 0px;
    overflow-x: hidden;
    overflow-y: scroll;
    color:#1a1a1a;
  }

</style>

